<template>
  <div style="width: 100%;height:200px;box-sizing:border-box">
    <el-col :span="12" class="comsec borderrtbot">
      <div>
        <h4>资产原值</h4>
        <p class="zcyz">{{ list[0] && list[0]['originalvalue'] }}<span>万元</span></p>
      </div>
    </el-col>
    <el-col :span="12" class="comsec borderbot">
      <div>
        <h4>累计折旧</h4>
        <p class="ljzj">{{ list[0] && list[0]['accumulateddeprecia'] }}<span>万元</span></p>
      </div>
    </el-col>
    <el-col :span="12" class="comsec borderrt">
      <div>
        <h4>资产净值</h4>
        <p class="zcjz">{{ list[0] && list[0]['equity'] }}<span>万元</span></p>
      </div>
    </el-col>
    <el-col :span="12" class="comsec">
      <div>
        <h4>本期折旧</h4>
        <p class="bqzj">{{ list[0] && list[0]['currentdepreciation'] }}<span>万元</span></p>
      </div>
    </el-col>
  </div>
</template>
<script>
import { getIndicators } from '@/api/basic-setting/dashboard/dashboard'

export default {
  name: 'MainTarget',
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getIndicatorsList()
  },
  methods: {
    async getIndicatorsList() {
      const res = await getIndicators()
      if (res.code === 20000) {
        this.list = res.data
      }
    }
  }
}
</script>
<style>
  .comsec {
    height: 100px;
  }

  .comsec h4 {
    font-size: 14px;
    margin-bottom: 5px;
    padding-top: 10px;
  }

  .comsec p {
    font-size: 16px;
  }

  .comsec p span {
    font-size: 12px;
    padding-left: 5px;
  }

  .zcyz {
    color: #0DAF36
  }

  .ljzj {
    color: #E0A712
  }

  .zcjz {
    color: #246FEA
  }

  .bqzj {
    color: #E03636
  }

  .borderrtbot {
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE
  }

  .borderrt {
    border-right: 1px solid #DEDEDE;
  }

  .borderbot {
    border-bottom: 1px solid #DEDEDE
  }
</style>
